<!DOCTYPE html>
<html lang="zh-CN" class="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>未来感后台管理系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://kit.fontawesome.com/a2e0e6ad65.js" crossorigin="anonymous"></script>
  <style>
    body { font-family: 'Noto Sans SC', sans-serif; }
    .glass {
      background: rgba(18,24,38,0.7);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(22,198,255,0.2);
    }
    .neon-border {
      border: 1px solid rgba(22,198,255,0.6);
      box-shadow: 0 0 12px rgba(22,198,255,0.6);
    }
    .btn-glow:hover {
      box-shadow: 0 0 12px #16C6FF, 0 0 24px #7B61FF;
    }
    .pulse-glow {
      animation: pulseGlow 2s infinite;
    }
    @keyframes pulseGlow {
      0%, 100% { box-shadow: 0 0 8px #16C6FF; }
      50% { box-shadow: 0 0 20px #7B61FF; }
    }
  </style>
</head>
<body class="bg-[#121826] text-gray-200 transition-colors duration-300">
  <!-- 顶部导航 -->
  <header class="flex justify-between items-center px-6 py-4 glass sticky top-0 z-50">
    <div class="flex items-center gap-3">
      <i class="fas fa-cubes text-cyan-400 text-2xl"></i>
      <h1 class="text-xl font-bold bg-gradient-to-r from-cyan-400 to-purple-500 text-transparent bg-clip-text">未来管理系统</h1>
    </div>
    <div class="flex items-center gap-4">
      <input type="text" placeholder="搜索..." class="px-3 py-1 rounded bg-[#1E2635] focus:ring-2 focus:ring-cyan-400 outline-none">
      <button id="themeToggle" class="btn-glow px-3 py-2 rounded bg-[#1E2635]"><i class="fas fa-moon"></i></button>
      <div class="flex items-center gap-2">
        <i class="fas fa-user-circle text-2xl text-cyan-400"></i>
        <span>管理员</span>
      </div>
    </div>
  </header>

  <!-- 主体布局 -->
  <div class="flex h-screen">
    <!-- 左侧导航 -->
    <aside class="w-60 glass p-4 space-y-4">
      <nav class="space-y-2">
        <a href="#" class="flex items-center gap-2 p-2 rounded hover:bg-cyan-500 hover:text-white transition"><i class="fas fa-home"></i> 首页</a>
        <a href="#" class="flex items-center gap-2 p-2 rounded hover:bg-cyan-500 hover:text-white transition"><i class="fas fa-tasks"></i> 任务管理</a>
        <a href="#" class="flex items-center gap-2 p-2 rounded hover:bg-cyan-500 hover:text-white transition"><i class="fas fa-microchip"></i> 设备管理</a>
        <a href="#" class="flex items-center gap-2 p-2 rounded hover:bg-cyan-500 hover:text-white transition"><i class="fas fa-database"></i> 数据中心</a>
        <a href="#" class="flex items-center gap-2 p-2 rounded hover:bg-cyan-500 hover:text-white transition"><i class="fas fa-cogs"></i> 系统设置</a>
      </nav>
    </aside>

    <!-- 主内容区 -->
    <main class="flex-1 overflow-y-auto p-6 space-y-6">
      <!-- 数据概览卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="glass neon-border p-4 rounded-lg text-center pulse-glow">
          <p class="text-gray-400">总任务数</p>
          <h2 class="text-3xl font-bold text-cyan-400">128</h2>
        </div>
        <div class="glass neon-border p-4 rounded-lg text-center">
          <p class="text-gray-400">运行中</p>
          <h2 class="text-3xl font-bold text-green-400">32</h2>
        </div>
        <div class="glass neon-border p-4 rounded-lg text-center">
          <p class="text-gray-400">警告</p>
          <h2 class="text-3xl font-bold text-yellow-400">5</h2>
        </div>
        <div class="glass neon-border p-4 rounded-lg text-center">
          <p class="text-gray-400">失败</p>
          <h2 class="text-3xl font-bold text-red-400">12</h2>
        </div>
      </div>

      <!-- 图表区 -->
      <div class="glass rounded-lg p-6">
        <h3 class="text-lg font-bold mb-4">任务执行趋势</h3>
        <div id="chart" class="w-full h-64 bg-[#1E2635] flex items-center justify-center text-gray-500">图表容器</div>
      </div>

      <!-- 数据表格 -->
      <div class="glass rounded-lg p-6">
        <h3 class="text-lg font-bold mb-4">任务列表</h3>
        <table class="w-full text-left border-collapse">
          <thead>
            <tr class="border-b border-gray-700">
              <th class="p-2">任务ID</th>
              <th class="p-2">任务名称</th>
              <th class="p-2">状态</th>
              <th class="p-2">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr class="hover:bg-cyan-900/30 transition">
              <td class="p-2">#001</td>
              <td class="p-2">接口自动化测试</td>
              <td class="p-2 text-green-400">运行中</td>
              <td class="p-2 space-x-2">
                <button class="btn-glow px-3 py-1 rounded bg-cyan-500">编辑</button>
                <button class="btn-glow px-3 py-1 rounded bg-red-500">删除</button>
              </td>
            </tr>
            <tr class="hover:bg-cyan-900/30 transition">
              <td class="p-2">#002</td>
              <td class="p-2">设备连接检测</td>
              <td class="p-2 text-yellow-400">警告</td>
              <td class="p-2 space-x-2">
                <button class="btn-glow px-3 py-1 rounded bg-cyan-500">编辑</button>
                <button class="btn-glow px-3 py-1 rounded bg-red-500">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </main>
  </div>

  <script>
    // 主题切换
    const themeToggle = document.getElementById('themeToggle');
    themeToggle.addEventListener('click', () => {
      document.documentElement.classList.toggle('dark');
      if (document.documentElement.classList.contains('dark')) {
        document.body.classList.replace('bg-white', 'bg-[#121826]');
      } else {
        document.body.classList.replace('bg-[#121826]', 'bg-white');
      }
    });
  </script>
</body>
</html>
